Views / Tabs / Panels - Dynamic Loading

Posted by discursives-gdo on February 28, 2007 at 10:11pm

Hello DOJO!

I want to be a Drupal ninja!

I have seen so many cool sites lately! There's one functionality set that has really caught my eye. I can't figure out how to do it, though. Can someone here give a hint? I've been through all the searches I can think of on Drupal.org and this is the first time I'm really asking, so I hope I give enough information! Here's a recent question verging on this: http://drupal.org/node/115058

What I'd like to do is display a view in a tab in a panel, and have the view be created by a stored argument that is autogenerated from the node ID.

The way this would be most useful is in something like the following:

A new content type is made for a group. Inside this content type is a query for the NID, which then populates this # into the views queries. The views queries are simple, like:

Lastest Posts
Latest Comments in the group
Latest '$CCK-Node-Type" posts in the group
Most Popular posts in the group

I think this would be a very slick way to do portals on a site in any fashion, and even better for groups that need to stay on top of things and get away from that default tabular format or the river of news.

Here are some beautiful Drupal site examples, so you can see this in action:

http://share.triangle.com/ the panels are "This just in" and "Things to do". Look at those beautiful tabs! Fast looking!!

http://teamsugar.com/ the panels are down in the footer-ish area, and show content from lots of places...great for easy access

http://www.newamerica.net/programs/new_america_in_california scroll down to see some really nice tabs that make finding things super easy on this content-dense site

In looking at the dynamicload module that comes with jstools, it seems like this is the kind of functionality I am after, and panels does handle views, and tabs are great and can be themed. I'm not so worried about the way this looks, but I am finding a big barrier with dynamicload in attempting to get a node loaded in the first place, much less injecting it into a panel, though I do understand now that panels do have a sort of ID system, and that addressing one in particular is very useful.

What are people using to do things like this? Tabs is easy, views is amazing, and panels seems like it's supremely useful for node layouts, but maybe panels isn't really necessary unless I want to put tab sets next to each other in different regions on the page?

Comments

Use the source, Luke.

Posted by ghoti on March 4, 2007 at 4:01am

Not having looked too closely at the AJAX used for dynamic loading, my first thought was that all the HTML from all the tabs is being loaded when you load the page. And sure enough -- on share.triangle.com under "things to do", the text from all three tabs is available in the HTML source when you load the page the first time. Clicking a tab doesn't load anything. It simply changes the display: on the HTML that comprises the tab content in question.

View the source of the page and search for the text "things to do" to see what I mean. There's JavaScript right there to handle addition of tabs labelled "events", "movies" and "dining".

And again, sure enough, a look at top of the source reveals a script being loaded named ".../yui-ext/TabPanel-min.js". YUI is the Yahoo UI library, which has lots of cool interface stuff. And they do have a TabView component with lots of options.

I haven't looked at the source of other two links you provided. But you can. :-)

Paul Chvostek — Developer, integrator, Internet plumber.

I've worked on this some more, and could use a little php help..

Posted by discursives-gdo on March 4, 2007 at 8:23pm

I saw some code for inserting views in tabs...I'm having some syntax issues with my php though. The code listed below hints at a potential solution, creating an $output1 variable, then put that inside the tabs output. Can someone help me understand how to do this?

I'm at the same place in my work right now. I've got the Views configured and the tabs code here. Both work separately, but not together yet. Can someone please give me a hint?

Here's the code that Tom posted:

<div class=tabs150 style="margin-top:10px; ">
<?php
$output1 = '<div class=inner>';
$output1 .= _get_news();
$output1 .= '</div>';
$tab .= theme('tabs_tab_page', t('<B>News</B>'), $output1);
$output1 = '<div class=inner>';
$output1 .= _get_chatter();
$output1 .= '</div>';
$tab .= theme('tabs_tab_page', t('<B>Chatter</B>'), $output1);
$output = theme('tabs_tabset', 'home', $tab, 'grey_red_90');
echo $output;
?>
</div>

He created this custom function _get_chatter that obviously contains his view_get_view code. How does that happen?

Here's the views that I'd like to put into my own new function, something like _get_blogteasers()

 <?php
$view_name = 'teaserblog1'; //name of my first view which goes in the blog tab
$limit = 3; // number of returns
$view_args = array();
print views_build_view('embed', views_get_view($view_name), $view_args, FALSE, $limit);
?>

and my second view:

 <?php
$view_name = 'teaserstory1'; //name of my second view which goes in tab 2
$limit = 3; // number of returns
$view_args = array();
print views_build_view('embed', views_get_view($view_name), $view_args, FALSE, $limit);
?>

wants to be placed inside the tabs code:

<?php
  $tabs .= theme('tabs_tab_page', t('Blogs'), t('This is the place where I want the first view'));
  $tabs .= theme('tabs_tab_page', t('Stories'), t('This is the place where I want the second view'));
  $output = theme('tabs_tabset', 'example', $tabs);
  print $output;
?>

I notice in what you have above, Thom, that you are compressing the views code into a single variable, $output1. Can you show me how to do something similar?

solution found...

Posted by discursives-gdo on March 4, 2007 at 11:21pm

Thanks to patrickharris who wrote a comment here: http://drupal.org/node/81798#comment-150204

<?php
 $my-view-php-code-output = views_build_view('embed', views_get_view('name_of_my_view'), $view_args, true, $limit); 
?>

this allows me to define a variable containing my view code so I could write:

<?php
  $tabs .= theme('tabs_tab_page', t('My Tab Title'), t($my-view-php-code-output));
  $output = theme('tabs_tabset', 'example', $tabs);
  print $output; 
?>

also, I shoudl say that I got an error until i added

<?php
 $view_args = array(); 
?>

before the first

<?php
 views_build_view 
?>

so put that at the top!

In the end, it looks something like this:

<?php
 
$view_args = array(); 
$my-view-php-code-output = views_build_view('embed', views_get_view('name_of_my_view'), $view_args, true, $limit);
$tabs .= theme('tabs_tab_page', t('My Tab Title'), t($my-view-php-code-output));
  $output = theme('tabs_tabset', 'example', $tabs);
  print $output;
?>

Sample?

Posted by jasonwhat on March 5, 2007 at 3:01am

Do you have a sample of this working? Also, is the last snippet of code just to display one tab, so you need that snippet multiple times for several tabs?

I added a handbook page to show how to do this

Posted by discursives-gdo on March 5, 2007 at 3:51am

times...check it out and let me know if it works for you:

http://drupal.org/node/124750

honest to goodness I use the code just like this, then copied out the styles sheet from tabs module that I liked, 4 samples come with it, and laid those down in my main style.css

I like things like this...this is easy...just took me a long time to figure out how easy ;)

I added a comment to his handbook page so it works with 5.1

Posted by BullCreek on March 7, 2007 at 5:41pm

For those of you who were having problems getting it to work:

<?php
  $tabs = array();
  $viewargs = array();
  $tabs[] = array(
    '#title' => t('Specifications'),
    '#content' => t('Some specifications go here.')
  );
  $tabs[] = array(
    '#title' => t('Reviews'),
    '#content' =>  views_build_view('embed', views_get_view('reviews'), $viewargs, true, 3)
  );

  return theme('tabs_tabset', $tabs);
?>

Thanks! This is great

Posted by brady747 on March 8, 2007 at 7:30am

Thanks! This is great and has helped my php knowledge (which is very minimal). Anyhow, I'm trying to figure out what to place in the content slot to call a block instead of a view? Ill keep digging around and try to find the answer....but if anyone can lead me towards the answer (or give it to me), that'd be great. Im also trying to find out why my tabs are stacked instead of next to each other although I'm assuming its a theme issue.

brady

look at the panels stuff

Posted by BullCreek on March 8, 2007 at 4:52pm

I think panels allow you to embed blocks inside them so it must be possible - maybe once you figure that out, you can then figure out how to embed either the panel or block into a tab. A decent overview explaining panels I recently read is here:

http://ryan.grinhost.net/tutorial/2007/anatomy_front_page

Thanks

Posted by brady747 on March 9, 2007 at 1:00am

Good idea. I also know when you can create a view you can have it make a 'block' so maybe I can work thru that. I was just hoping to learn the programmatic way to have php call blocks instead of views in the example above. Time to learn more. Thanks to all, if anyone has any other ideas Id love it.

Brady

That page doesn't explain

Posted by d3p0 on March 8, 2007 at 8:44am

That page doesn't explain where the snippet needs to be added.

it can be added anywhere php can go

Posted by BullCreek on March 8, 2007 at 4:44pm

For instance, you can create a new Page node, and paste the snippet in the body textarea. Be sure to then to select 'PHP code' as the "Input format". Alternatively, you could put it in node.tpl.php or other areas.

Patch available for tabs module

Posted by nedjo on March 12, 2007 at 3:46am

I've posted a patch for tabs module that implements dynamic loading of standard Drupal tabs. The patch is working but needs some further development to allow limiting of the pages it loads on. It requires the HEAD version of dynamicload module.

That's great! Can you provide the link?

Posted by discursives on March 12, 2007 at 5:08pm

I look forward to checking it out!

http://peerproducers.com - Peer Production Praxis

http://alexrollin.com

Ah yes, the link...

Posted by nedjo on March 13, 2007 at 2:55am

Here it is: http://drupal.org/node/126532

Mini panels module with Panels 2

Posted by hansrossel on October 19, 2007 at 6:25pm

I'm unpatiently waiting until Panels 2 out of its alpha state to use the mini panels module, which beautifully does everything with tabs and views and more: http://wimleers.com/demo/mini-panels

For the moment I have been able to display views as tabs using a combination of the CCK fieldgroup tabs module and the viewfield module. Just make a content type with several fieldgroups, each containing one viewfield and let the fieldgroups be displayed as tabs.
No php needed, which makes it easier for customers to change the content themselves.

Another way to display views as tabs...

Posted by Alex UA on October 25, 2007 at 1:40pm

I didn't do the initial build on this, just troubleshooting, styling, and some configurations, but the <a href="http://rhinebeck-ny.gov/>Rhinebeck, NY site has a number of interesting (to me) ways to display views content as panels without the need for PHP (though it does require a bit of theming). Here's what was done to make it work.
1- The desired views were made (as pages).
2- A custom region was made, and placed directly under the main content region.
3- A two column panel was made, though only one of the sides was used, and each desired tab item was placed into that side by selecting the appropriate view. On the bottom of the panels page the "display style" was set to "tabs".

That created the following page: http://rhinebeck-ny.gov/government-directory

However, there are also three sets of tabbed pages on the front page of each organic group on the site (the ogs in this case are each related to an individual committee or office of the town/village), using the nid of an organic group as an argument to display info relating to that specific og.

The site just launched, so none of the real pages have all three tab areas displayed, but on this page you can see one of them on the bottom: http://rhinebeck-ny.gov/committees/town-board

Alex Urevick-Ackelsberg
ZivTech: Illuminating Technology

Forgot a step...

Posted by Alex UA on October 25, 2007 at 2:10pm

Sorry, I forgot a vital step.

Using the panels block module the panels were exposed as blocks, enabled in the custom region, and restricted to only the nodes that they were supposed to show up on in the block admin section.

Alex Urevick-Ackelsberg
ZivTech: Illuminating Technology

I wasn't as patient...

Posted by projectstars (not verified) on October 19, 2007 at 6:42pm

I'm using lots of panels on www.projectstars.com (4 panels, 30 views on homepage)

It uses panel2-alpha9, I have problems with alpha10 and 11.

Couldn't do without them, they rock!

tabs3 in jquery UI

Posted by moshe weitzman on October 31, 2007 at 8:13pm

lovely simple: http://stilbuero.de/jquery/tabs_3/

I recently built this again

Posted by discursives on November 21, 2007 at 1:11pm

there are several new additions including tabbed field groups. Along with view reference fields this can make handy and quick work of simple implementations that need to take this track.